window.addEventListener('load',function() {
	var focus = document.querySelector('.focus');
	var arrow_l  = document.querySelector('.arrow-l');
	var arrow_r = document.querySelector('.arrow-r');
	var focusWidth = focus.offsetWidth; 
	focus.addEventListener('mouseenter',function() {
		arrow_l.style.display = 'block';
		arrow_r.style.display = 'block';
		clearInterval(timer);
		timer = null;
	});
	focus.addEventListener('mouseleave',function() {
		arrow_l.style.display = 'none';
		arrow_r.style.display = 'none';
		timer = setInterval(function() {
			//手动调用事件
			arrow_r.click();
		},3000);
	});
	
	var ol = focus.querySelector('ol');
	var ul = focus.querySelector('ul');
	for(var  i = 0;i < ul.children.length;i++) {
		var li = document.createElement('li');
		//生成小圆圈的索引号
		li.setAttribute('index',i);
		ol.appendChild(li);

		li.addEventListener('click',function() {
			for(var i=0;i < ol.children.length;i++) {
				ol.children[i].className = "";
			}
			this.className  = 'current';

			var index = this.getAttribute('index');
			//移动距离等于小圆圈的 索引号 * 图片宽度
			animate(ul,-index * focusWidth);
			//点击小圆圈时吧小圆圈的 index值给num 和 circle 
			num = circle = index;
			//circle = index;
		})
		
	};
	ol.children[0].className = 'current';
	//克隆第一张图 放在最后
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);

	var num = 0;
	//circle小圆圈的播放
	var circle = 0;
	//flag 节流阀
	var flag  = true;
	arrow_r.addEventListener('click',function() {
		if(flag) {
			flag = false; //关闭节流阀
		//无缝滚动 最后 一张图片变成第一张 num=0
		//console.log(ul.children);
		if(num == ul.children.length - 1) {
			ul.style.left = 0;
			num = 0;
		}
		num++;
		animate(ul,-num * focusWidth,function() {
			flag = true;
		});

		circle++;
		//如果circle到最后 需要复原 到第一个
		if(circle == ol.children.length) {
			circle = 0;
		}
		circleChange();
		}
	});
	arrow_l.addEventListener('click',function() {
		if(flag) {
			flag = false;
			
		//无缝滚动 最后 一张图片变成第一张 num=0
		//console.log(ul.children);
		//console.log(ol.children);
		if(num == 0) {
			num = ul.children.length - 1;
			ul.style.left = -num * focusWidth + 'px';
		}
		num--;
		//console.log(num);
		animate(ul,-num * focusWidth,function() {
			flag = true;
		});

		//如果circle到最后 需要复原 到第一个
		if(circle == 0) {
			circle = ol.children.length;
		}
		circle--;
		circleChange();
		}
	});
	function circleChange() {
		for(var i = 0;i<ol.children.length;i++) {
			ol.children[i].className = "";
		}
		ol.children[circle].className = 'current';
	}

	//自动播放
	var timer = setInterval(function() {
		//手动调用事件
		arrow_r.click();
	},3000);
});


$(function() {
	//点击li 时不需要执行滚动里的 li 事件   运用节流阀 互斥锁
	var flag = true;
	var toolTop = $(".recommend").offset().top;
	toggleTool();
	function toggleTool() {
		if($(document).scrollTop() >= toolTop) {
			$(".fixedtool").fadeIn();
		}else {
			$(".fixedtool").fadeOut();
		}
	}
	$(window).scroll(function() {
		toggleTool();
		
		if(flag) {
			$(".floor .w").each(function(i,ele) {
				if($(document).scrollTop() >= $(ele).offset().top) {
					//找到对应 li 
					$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
				}
			});
		}
	});
	
	$(".fixedtool li").click(function() {
		flag = false;
		//console.log($(this).index());
		//选出对应索引号的内容区的盒子 
		var current = $(".floor .w").eq($(this).index()).offset().top;
		$("body,html").stop().animate({
			scrollTop: current,
		},function() {
			flag = true;
		});
		
		$(this).addClass("current").siblings().removeClass();
	});
});